<script setup>
	import { ref, computed, reactive } from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { exceptApi } from '@/apis/task.js'

	// 1. 异常上报表单数据
	const formData = ref({
		"transportTaskId": '', // 任务 id
		exceptionTime: "", // 异常时间
		"exceptionPlace": "", // 异常位置
		"exceptionType": "", //  异常类型
		"exceptionDescribe": "", // 异常描述
		"exceptionImagesList": [] //  异常图片描述
	})

	onLoad(({ transportTaskId }) => {
		// 存储任务 id
		formData.value.transportTaskId = transportTaskId
	})

	// 2. 打开地图
	async function onLocationChoose() {
		// 1.  打开地图选择一个位置，确定之后 res 就可以获取地址信息
		const res = await uni.chooseLocation({})
		console.log('司机选择的异常位置：', res)
		// 2.  存储异常位置
		formData.value.exceptionPlace = res.address
	}
	// 3. 异常类型
	// 组件 ref
	const popup = ref(null)

	// 定义 popup 组件展示的选项数据
	const exceptionTypes = reactive([
		{ text: '发动机启动困难', checked: false },
		{ text: '不着车，漏油', checked: false },
		{ text: '照明失灵', checked: false },
		{ text: '排烟异常、温度异常', checked: false },
		{ text: '其他问题', checked: false },
	])

	// 点击修改类型的 checked 属性
	const selType = (i) => {
		console.log(i)
		exceptionTypes[i].checked = !exceptionTypes[i].checked
	}

	// 点击类型弹层确认按钮
	function onPopupConfirm() {
		// popup.value 弹层组件实例
		popup.value.close()
		// 点击确定后获取选择的异常类型，存储到 formData 并回显
		// 1. 获取选择的异常类型=>  异常类型checked=true
		const selected = exceptionTypes.filter(item => item.checked === true)
		console.log("选中的异常类型：", selected)
		// 2. 处理选中的异常类型
		formData.value.exceptionType = selected.map(item => item.text).join('|')
	}

	// 打开弹层
	function onPopupOpen() {
		popup.value.open()
	}

	// 4.  异常描述字数统计
	const wordCounts = computed(() => formData.value.exceptionDescribe.length)

	// 5. 异常图片( 临时) =》提交的时候处理成后台需要的格式
	const exceptionImgs = ref([])
	// 6. 兜底校验: true 禁用提交按钮 ｜ false 启动提交
	const isSubmitDisable = computed(() => {
		return !formData.value.exceptionTime || !formData.value.exceptionPlace || !formData.value.exceptionType
	})
	const submit = async () => {
		//  处理异常描述图片的格式
		formData.value.exceptionImagesList = exceptionImgs.value.map(item => ({ url: item.url }))
		await exceptApi(formData.value)
		uni.reLaunch({
			url: '/pages/task/index'
		})
	}
</script>

<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view style="margin: 30rpx" class="scroll-view-wrapper">
				<!-- 表单 -->
				<uni-list :border="false">
					<!-- 1. 异常时间 -->
					<uni-list-item show-arrow title="异常时间">
						<!-- 通过具名插槽 footer 自定义右侧内容=》日期选择器 -->
						<template #footer>
							<uni-datetime-picker v-model="formData.exceptionTime">
								<!-- 回显选择的时间 -->
								<view class="picker-value">{{ formData.exceptionTime || '选择异常时间' }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
					<!-- 2. 异常位置 -->
					<uni-list-item show-arrow clickable ellipsis="1" @click="onLocationChoose" title="上报位置"
						:rightText="formData.exceptionPlace || '请选择'" />
					<!-- 3. 异常类型 =》点击打开弹层选择类型 -->
					<uni-list-item show-arrow clickable @click="onPopupOpen" title="异常类型"
						:rightText="formData.exceptionType || '请选择'" />
					<!-- 4. 异常描述 -->
					<uni-list-item direction="column" title="异常描述">
						<template v-slot:footer>
							<view class="textarea-wrapper">
								<textarea v-model="formData.exceptionDescribe" class="textarea" placeholder="请输入异常描述"></textarea>
								<view class="words-count">{{wordCounts}}/50</view>
							</view>
						</template>
					</uni-list-item>
					<!-- 5. 异常图片上传 -->
					<uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
						<template v-slot:footer>
							<uni-file-picker v-model="exceptionImgs" file-extname="jpg,webp,gif,png" limit="6"></uni-file-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
		<view class="fixbar">
			<!-- 表单提交 -->
			<button @click="submit" :disabled="isSubmitDisable" class="button disable">提交</button>
		</view>
		<!-- == 异常类型弹层 == 
		uni-popup  弹层组件
		通过 ref 获取弹层组件实例，然后调用实例方法控制弹层显隐
		
		-->
		<uni-popup ref="popup" :mask-click="false" type="bottom">
			<!-- 自定义弹层内容=》默认插槽 -->
			<uni-list class="popup-action-sheet">
				<uni-list-item>
					<template v-slot:header>
						<view class="header">选择类型</view>
					</template>
				</uni-list-item>

				<!-- 动态渲染 -->
				<uni-list-item v-for="(exceptionType, index) in exceptionTypes" :key="exceptionType.text"
					:title="exceptionType.text">
					<template #footer>
						<!--  选择变化的时候：通过 change 事件执行选项的修改 -->
						<checkbox-group class="checkbox" @change="selType(index)">
							<checkbox :checked="exceptionType.checked" color="#EF4F3F" />
						</checkbox-group>
					</template>
				</uni-list-item>

				<uni-list-item>
					<template v-slot:body>
						<!-- 确定后关闭弹层 -->
						<button @click="onPopupConfirm" class="button">确定</button>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>